<template>
	<view class="container u-flex-center" :style="{height: computedVal.getHeight() + 'px'}">
		<p class="text">
			<span class="letter letter1">L</span>
			<span class="letter letter2">o</span>
			<span class="letter letter3">a</span>
			<span class="letter letter4">d</span>
			<span class="letter letter5">i</span>
			<span class="letter letter6">n</span>
			<span class="letter letter7">g</span>
			<span class="letter letter8">.</span>
			<span class="letter letter9">.</span>
			<span class="letter letter10">.</span>
		</p>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';

	const props = defineProps({
		height: {
			type: Number,
			default: 0
		}
	})

	const computedVal = computed(() => {
		return {
			getHeight() {
				if (!props.height) {
					const { windowHeight } = wx.getWindowInfo();
					return windowHeight
				} else {
					return props.height
				}
			}
		}
	})
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;

		.text {
			font-size: $font-size-24;
			color: black;
			font-weight: bolder;

			@keyframes letter {
				0% {
					font-size: $font-size-26;
				}

				50% {
					font-size: $font-size-36;
				}

				100% {
					font-size: $font-size-26;
				}
			}

			.letter {
				animation: letter 1s infinite;
			}

			.letter1 {
				animation-delay: 0s;
			}

			.letter2 {
				animation-delay: -0.9s;
			}

			.letter3 {
				animation-delay: -0.8s;
			}

			.letter4 {
				animation-delay: -0.7s;
			}

			.letter5 {
				animation-delay: -0.6s;
			}

			.letter6 {
				animation-delay: -0.5s;
			}

			.letter7 {
				animation-delay: -0.4s;
			}

			.letter8 {
				animation-delay: -0.3s;
			}

			.letter9 {
				animation-delay: -0.2s;
			}

			.letter10 {
				animation-delay: -0.1s;
			}
		}
	}
</style>